---
sidebar_position: 6
---
import StyleGenerator from '../src/demos/styleGenerator'

# Styling

You can very easily customize the way DSG looks using CSS.

## Custom classes
You can add custom css classes to:
- the [grid](./api-reference/props#classname), 
- a [row](./api-reference/props#rowclassname), 
- a [header cell](./api-reference/columns#headerclassname), 
- a [cell](./api-reference/columns#cellclassname) of a column,
- or a [cell](./api-reference/props#cellclassname) of the grid.

Some even allow to specify a function instead of simply a string to dynamically apply a class based on the data:

```tsx
<DataSheetGrid
  rowClassName={({ rowIndex }) => hasError(rowIndex) ? 'row-error' : null }
/>
```

## Custom properties

The easiest way is to use [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
Because of the way custom properties work, you can define them anywhere in your style. Note that all custom properties
are prefixed with `--dsg-`.

### At the :root level
If you want all the DSG of your app to have the same styling you can define the custom properties at the
[:root](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) level.

```css
:root {
  --dsg-selection-border-color: tomato;
}
```

### Using a class
If you need some DSG in your app to have a slightly different styling you can use CSS classes.


```css
.my-class {
  --dsg-selection-border-color: tomato;
}
```

```tsx
<DataSheetGrid className="my-class" />
```

### Using style
If you want to override a single DSG in your app you can directly use the style property.

```tsx
<DataSheetGrid style={{ '--dsg-selection-border-color': 'tomato' }} />
```

### Generator

<StyleGenerator />

## Override more specific CSS

If custom properties do not allow you to customize what you need, you can manually override any CSS class.
All classes are prefixed with `.dsg-`. See style [reference](https://github.com/nick-keller/react-datasheet-grid/blob/master/src/style.css).
